<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>高阶函数学习</title>
		
	</head>
	<body>
		<div id="app">
			<!--1.展现原始数据  -->
			<h3>挑选{{arrays}}中小于100的数据,之后将数据乘以2,之后将结果求和</h3>
			<hr >
			<h2 >获取小于100的数据{{array1}}</h2>
			<hr >
			<h2 >将数据乘以2 {{array2}}</h2>
			<hr >
			<h2 >最终结果求和 {{total}}</h2>
		</div>	
		
		
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				
				el : "#app",
				data : {
					arrays : [1,3,4,66,88,90,100],
				},
				computed:{
					array1(){
						/**
						 * x.filter:
						 * 	 返回值: true  将满足条件的数据进行过滤  之后形成新的数组
						 * 	 返回值: false 将不满足条件的数据进行筛选
						 */
						let arrays1 = this.arrays.filter(function(n){
							return n<100;
						});
						return arrays1;
					},
					array2(){
						/**
						 * x.map函数: 将每个元素单独取出进行操作之后返回
						 */
						return this.array1.map(function(n){
							
							return n * 2;
						})
					},
					total(){
						/**
						 * x.reduce(function(pre,n),默认值) 表示数据汇总 
						 * 参数说明:
						 * 	pre:表示前一个数据
						 *  n: 表示要遍历的元素
						 * 	return: 将结果返回给pre 准备下一次调用
						 */
						return this.arrays.filter(function(n){
							
							return n <100
						}).map(function(n){
							return n * 2
						}).reduce(function(pre,n){
							return pre + n
						},0)
					}
				}
				
			}) 
		</script>
	</body>
</html>
